{{ $platform := .Params.platform }}
<div class="py-12 md:py-16 lg:py-20 mx-auto max-w-6xl text-center px-8 md:px-4 lg:px-0">
  {{ partial "home/heading.html" (dict "title" $platform.title) }}

  <p class="mt-4 text-xl md:text-2xl font-light text-gray-700 dark:text-gray-200">
    {{ $platform.description | safeHTML }}
  </p>

  <div class="mt-6 text-center">
    {{/* Selector */}}
    <div class="inline-flex space-x-5 bg-dark dark:bg-white py-1.5 px-2.5 rounded-full shadow-sm">
      {{ range $platform.tabs }}
      <button @click="$store.global.platformTab = '{{ . }}'" :class="{ 'rounded-full py-0.5 px-2.5 text-dark bg-primary dark:bg-dark dark:text-primary': $store.global.platformTab === '{{ . }}' }" class="uppercase text-sm font-semibold text-smtracking-tight text-white dark:text-dark">
        {{ . }}
      </button>
      {{ end }}
    </div>

    {{/* Selectable images */}}
    <div class="mt-12 mx-auto flex flex-col items-center">
      {{ range $platform.tabs }}
      {{ $name := . | lower | urlize }}
      {{ $svg := printf "/img/topologies/%s.svg" (. | urlize) }}
      {{ $url := printf "/docs/setup/deployment/topologies/#%s" $name | relURL }}
      <div x-show="$store.global.platformTab === '{{ . }}'">
        <div class="max-w-full md:max-w-5xl">
          {{ partial "svg.html" (dict "src" $svg) }}
        </div>

        <div class="mt-8 md:mt-10 lg:mt-12 tracking-tight">
          <p class="text-sm md:text-md lg:text-lg text-gray-500 dark:text-gray-400">
            Learn more about the <a href="{{ $url }}" class="text-primary-dark dark:text-primary hover:text-secondary dark:hover:text-secondary">{{ $name }}</a> deployment topology for Vector
          </p>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</div>